<script type="text/javascript" charset="UTF-8">
	$(document).ready( function() {

		$("#fromHour, #toHour").timepicker({
			minutes: {
				interval: 30
			}
		});
	});
</script>

<form id="addEditAppointmentForm" class="dataForm" method="post" action="#">
	<input id="id" type="hidden" value="${appointment.id}">
	<fieldset>
		<legend>Appointment details</legend>
		<ol>
			<li>
				<label for="name">Name</label>
				<input id="name" name="name" type="text" placeholder="name" value="${appointment.name}" required/>
			</li>
			<li>
				<label for="fromHour">From</label>
				<input id="fromHour" name="fromHour" type="text" placeholder="from hour" value="${appointment.fromHour}" required/>
			</li>
			<li>
				<label for="toHour">To</label>
				<input id="toHour" name="toHour" type="text" placeholder="to hour" value="${appointment.toHour}" required/>
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<a id="cancel" class="button" href="#">Cancel</a>
		<a id="submit" class="button" href="#">Save</a>
	</fieldset>
</form>
